<template>
	<el-container>
		<el-header> </el-header>
		<el-main class="nopadding">
			<sc-Table ref="table" border :apiObj="apiObj" stripe remoteSort remoteFilter>
				<el-table-column
					align="center"
					label="探针ID"
					prop="agenId"
					width="170"
					column-key="filterUserName"
				></el-table-column>
				<el-table-column
					align="center"
					label="服务器监听地址"
					prop="host"
					width="170"
					column-key="filterUserName"
				></el-table-column>
				<el-table-column align="center" label="服务端口" prop="port" width="170" sortable="custom"></el-table-column>
				<el-table-column
					align="center"
					label="版本号"
					prop="arthasVersion"
					sortable="custom"
					width="320"
				></el-table-column>
				<el-table-column align="center" label="目标主机" prop="clientConnectHost" width="170"></el-table-column>
				<el-table-column align="center" label="目标端口" prop="clientConnectTunnelPort" width="170"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="320">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="show_console(scope.row, scope.$index)"
								>查看
							</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</sc-Table>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: 'arthas_list',
	components: {
		console
	},
	data() {
		return {
			apiObj: this.$API.sys.list
		}
	},
	watch: {},

	mounted() {},
	async created() {},
	methods: {
		show_console(row) {
			let agentId = row.agenId;
			let clientConnectHost = "10.25.0.12";
			let clientConnectTunnelPort = row.clientConnectTunnelPort;
			const params = new URLSearchParams({
				agentId,
				clientConnectHost,
				clientConnectTunnelPort,
			}).toString();
			window.open(`/#/sys/console/?${params}`, '_blank');
		},
		issue() {},
		close() {
			this.$refs.table.clearSelection()
			this.$refs.table.getData()
		}
	}
}
</script>
<style></style>
